import { Modal, Form, Input, DatePicker } from 'antd'
import { useRef } from 'react'

const DiaLog = (props) => {
	const { isOpenModel, setIsOpenModel } = props
	const formRef = useRef(null)

	const handleOk = async () => {
		try {
			if (formRef.current) {
				await formRef.current.validateFields()
				let data = formRef.current.getFieldsValue()
				console.log(data)
				setIsOpenModel(false)
			}
		} catch (error) {
			console.log(error)
		}
	}

	const handleCancel = () => {
		setIsOpenModel(false)
	}

	const onFinish = (values) => {
		console.log('onFinish', values)
	}
	const onFinishFailed = (errorInfo) => {
		console.log('onFinishFailed', errorInfo)
	}

	const onChange = (date, dateString) => {
		console.log(date, dateString)
	}
	return (
		<Modal
			title="新增任务窗口"
			open={isOpenModel}
			onOk={handleOk}
			onCancel={handleCancel}
			okText="提交信息" // 设置确认按钮文字
			cancelText="取消" // 设置取消按钮文字
		>
			<Form
				ref={formRef}
				layout="vertical"
				name="basic"
				initialValues={{
					remember: true,
				}}
				onFinish={onFinish}
				onFinishFailed={onFinishFailed}
				autoComplete="off"
			>
				<Form.Item
					label="任务描述"
					name="taksDesc"
					rules={[
						{
							required: true,
							message: "请输入任务描述",
						},
					]}
				>
					<Input.TextArea rows={4} />
				</Form.Item>

				<Form.Item
					label="任务预计完成时间"
					name="taskTime"
					rules={[
						{
							required: true,
							message: "请输入预计完成时间",
						},
					]}
				>
					<DatePicker
						showTime
						format="YYYY-MM-DD HH:mm"
						onChange={onChange}
						style={{ width: "260px" }}
					/>
				</Form.Item>
			</Form>
		</Modal>
	)
}

export default DiaLog
